<script setup>
	import {
		ref,
		onMounted,
	} from 'vue';
	import {
		navigateBack
	} from "@/assets/scripts/navigate.js"
	import {
		getInfo2Api,
	} from "@/assets/api/other/recommend.js"
	import {
		putEditWxApi,
	} from "@/assets/api/other/userInfo.js"
	import {
		uploadApi,
	} from "@/assets/api/other/spaceDetails.js"
	const nickName = ref('')
	const sex = ref('')
	const avatar = ref('')
	const files = ref()
	const sexSelect = ref()
	const isUploading = ref(false)
	const userInfo = ref({})

	const actions = [{
		name: '男',
	}, {
		name: '女',
	}]

	// 性别选择
	const showSexSelect = () => {
		sexSelect.value.open();
	}

	// 性别选择返回结果
	const handleSexSelect = (e) => {
		sex.value = e.name;
	}

	const upload = () => {
		console.log('upload', files.value);
		files.value.choose()
	}

	const handleUploadSuccess = async (e) => {
		const num = 2 // 限定 2m大小
		if (e.tempFiles[0].size > num * 1024 * 1024) {
			uni.showToast({
				title: '上传文件太大',
				icon: 'error'
			})
			return
		}
		isUploading.value = true
		const res = await uploadApi(e.tempFilePaths[0])
		isUploading.value = false
		if (res.code === 200) {
			uni.showToast({
				title: '上传成功',
				icon: 'uccess',
				complete: () => {
					avatar.value = res.url
				}
			})
		} else {
			uni.showToast({
				title: '上传失败',
				icon: 'error'
			})
		}
	}

	const handleSubmit = async () => {
		if (isUploading.value == true) {
			uni.showToast({
				title: '图片上传中',
				icon: 'error'
			})
		}
		const res = await putEditWxApi({
			userId: userInfo.value.userId,
			nickName: nickName.value,
			avatar: avatar.value,
			sex: sex.value === '男' ? '0' : '1'
		})
		if (res && res.code === 200) {
			uni.showToast({
				title: '修改成功',
				icon: 'success',
				success: () => {
					userInfo_init() // 用户信息
				}
			})
		} else {
			uni.showToast({
				title: '请求失败',
				icon: 'error'
			})
		}
	}

	onMounted(() => {
		userInfo_init() // 用户信息
	})

	const userInfo_init = async () => {
		const user = uni.getStorageSync('user')
		const res = await getInfo2Api(user.userId)
		if (res.code === 200) {
			userInfo.value = res.user
			avatar.value = userInfo.value.avatar
			nickName.value = userInfo.value.nickName
			sex.value = userInfo.value.sex === '0' ? '男' : '女'
			uni.setStorageSync('user', res.user)
		} else {
			uni.showToast({
				title: '获取用户信息失败',
				icon: 'error',
			})
		}
	}
</script>

<template>
	<uv-navbar :fixed="false" bgColor="#f5f5f5" @leftClick="navigateBack" title="个人信息">
	</uv-navbar>

	<uv-action-sheet ref="sexSelect" :actions="actions" title="请选择性别" @select="handleSexSelect">
	</uv-action-sheet>

	<uni-file-picker v-show='false' ref="files" file-mediatype="image" limit='1' :auto-upload='false'
		@select="handleUploadSuccess($event)" />

	<uv-cell-group>
		<uv-cell icon="account-fill" isLink title="头像" @click="upload">
			<template #value>
				<uv-avatar :src="avatar"></uv-avatar>
			</template>
		</uv-cell>
		<uv-cell icon="chat-fill" title="昵称">
			<template #value>
				<uv-input placeholder="请输入内容" border="bottom" v-model="nickName"></uv-input>
			</template>
		</uv-cell>
		<uv-cell icon="level" isLink title="性别" @click="showSexSelect">
			<template #value>
				<view>
					{{sex?sex:'请选择'}}
				</view>
			</template>
		</uv-cell>
	</uv-cell-group>
	<uv-button type="primary" class="px-normal mt-big" text="确定" @click="handleSubmit"></uv-button>
</template>

<style lang="scss" scoped>

</style>